<template>
	<view class="coures_wrap">
		<!-- <view class="flex nav_wrap">
			<view :class="nav_index == index ? 'nav_item active' : 'nav_item'" @click="toNav(index)"
				v-for="(item,index) in category" :key="index">{{ item.name }}</view>
		</view> -->
		<scroll-view scroll-y="true" style="width: 180rpx;height: calc(100vh - 120rpx);background: #F2F2F2;">
			<view class="nav_wrap">
				<view :class="nav_index == index ? 'nav_item active' : 'nav_item'" @click="toNav(index)"
					v-for="(item,index) in category" :key="index">{{ item.name }}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 120rpx);">
			<view class="list_wrap" v-if="list.length > 0">
				<view class="grid-item" v-for="(item,index) in list" @click="toDetail(item.id)">
					<image class="image_10" :src="ossUrl + item.image" />
					<view class="cont_item">
						<text class="font text_4 row_2">{{ item.title }}</text>
						<view class="font_9 mt-6 flex justify-between">
							<!-- <text class="font_8">观看人数：{{ item.watch_number }}</text> -->
							{{ item.createtime }}
						</view>
						<view class="flex justify-between items-center mt-12">
							<view class="price">{{ item.price }}元</view>
							<view class="flex">
								<image @click.prevent="bindCollect(item.id,item.user_star,index)" class="collect_icon"
									v-if="item.user_star == 0" :src="remoteUrl + 'collect_n.png'" mode=""></image>
								<image @click.prevent="bindCollect(item.id,item.user_star,index)" class="collect_icon"
									v-if="item.user_star == 1" :src="remoteUrl + 'collect_y.png'" mode=""></image>
								<view class="flex-col justify-start items-center button" @click.prevent="toPay(item)" v-if="item.user_buy == 0">
									<text class="font_12">立即购买</text>
								</view>
								<view class="flex-col justify-start items-center button" v-if="item.user_buy == 1">
									<text class="font_12">已购买</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="text-align: center;padding-top: 100rpx;">暂无课程~</view>
		</scroll-view>
		
		<CustomTabBar :selected="2"></CustomTabBar>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		getCouresList,
		starCourse,
		getCourseCategory
	} from '@/api/coures.js'
	import CustomTabBar from "@/components/CustomTabBar/CustomTabBar.vue"
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				nav_index: 0,
				category: [],
				list: [],
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getCategoryFun()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			getCouresListFun() {
				getCouresList({
					course_category_id: this.category[this.nav_index].id
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						this.list = res.data
					}
				})
			},
			// 获取课程分类
			getCategoryFun() {
				uni.showLoading({
					title: '加载中...'
				})
				getCourseCategory().then(res => {
					if (res.code == 1) {
						this.category = res.data
						this.getCouresListFun()
					}
				})
			},
			toNav(index) {
				this.nav_index = index
				this.list = []
				this.getCouresListFun()
			},
			// 收藏
			bindCollect(id, flag, index) {
				starCourse({
					id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: flag == 0 ? '收藏成功' : '取消收藏成功',
							icon: 'none'
						})
						this.list[index].user_star = flag == 0 ? 1 : 0
					}
				})
			},
			// 跳转购买
			toPay(item) {
				if (!uni.getStorageSync('userInfo')) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				uni.navigateTo({
					url: '/pages/pages-list/couresOrder/couresOrder?detail=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toDetail(id) {
				if (!uni.getStorageSync('userInfo')) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				uni.navigateTo({
					url: '/pages/pages-list/coures_detail/coures_detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coures_wrap {
		display: flex;
		.nav_wrap {
			width: 180rpx;
			height: 96rpx;
			align-items: center;
			// padding: 0 28rpx;
			// background: #fff;

			.nav_item {
				font-size: 30rpx;
				color: #989595;
				text-align: center;
				padding: 20rpx 10rpx;
				// margin-right: 80rpx;
			}

			.active {
				color: #1C41F1;
				font-weight: bold;
				position: relative;
				background: #fff;
			}

			.active::after {
				content: "";
				// width: 60rpx;
				height: 24rpx;
				border-left: 6rpx solid #1C41F1;
				position: absolute;
				bottom: 24rpx;
				left: 3rpx;
				border-radius: 0 10rpx 10rpx 0;
				transform: translate(-50%);
			}
		}

		.list_wrap {
			padding: 0 16rpx;

			.grid-item {
				width: 550rpx;
				margin: 0 auto 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;

				.image_10 {
					border-radius: 10rpx;
					width: 150rpx;
					height: 150rpx;
				}

				.cont_item {
					width: 68%;

					.font {
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
					}

					.font_9 {
						font-size: 22rpx;
						color: #000000;
					}

					.font_8 {
						font-size: 22rpx;
						color: #000000;
					}

					.price {
						color: #1c41f1;
						font-size: 28rpx;
					}

					.collect_icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.button {
						padding: 3rpx 20rpx;
						background-color: #ffffff;
						border-radius: 54rpx;
						border: solid 1rpx #1c41f1;

						.font_12 {
							font-size: 22rpx;
							color: #1c41f1;
						}
					}
				}
			}
		}
	}
</style>